<template>
	<view>
		<view class="header-view" style="background: url(/static/image/09.png) no-repeat;background-size: 100% 100%;">
			<template v-if="userinfo.id">
				<view class="flex-alignItems-center" style="margin: 180rpx 30rpx 0 30rpx;" @click="$tools.navigateTo('/pages/login/login')">
					<image class="img-160 border-50radius margin-right30" :src="userinfo.avatar" mode=""></image>
					<view class="flex-alignItems-center" @click.stop="$tools.navigateTo('/pages/mine/mine-list/personal-data')">
						<view class="fontSize-15 color-fff margin-right20">{{userinfo.nickname}}</view>
						<u-icon name="edit-pen" color="#ffffff" size="25"></u-icon>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="flex-alignItems-center" style="margin: 180rpx 30rpx 0 30rpx;" @click="$tools.navigateTo('/pages/login/login')">
					<image class="img-160 border-50radius margin-right30" src="../../static/image/user.png" mode=""></image>
					<view class="flex-alignItems-center">
						<view class="fontSize-15 color-fff margin-right20">登录</view>
						<!-- <u-icon name="edit-pen" color="#ffffff" size="25"></u-icon> -->
					</view>
				</view>
			</template>
		</view>
		<view class="padding-30">
			<view class="bg-fff padding-30 border-radius20 margin-bottom30" style="margin-top: -100rpx;">
				<view class="flex-between margin-bottom50">
					<view class="fontSize-18 color-000 fontWeight-bold">就诊人管理</view>
					<view class="flex-alignItems-center" @click="$tools.navigateTo('/pages/index/patient-list')">
						<view class="fontSize-15 color-000 margin-right10">就诊人列表</view>
						<u-icon name="arrow-right" color="#333333" size="20"></u-icon>
					</view>
				</view>
				<view class="jiuzhen-view1" v-if="jiuzhenInfo.id">
					<view class="flex-alignItems-center margin-bottom20">
						<view class="fontSize-15 fontWeight-bold margin-right10">{{jiuzhenInfo.name}}</view>
						<view class="btn1 flex-center margin-right10">{{jiuzhenInfo.relation}}</view>
						<view class="fontSize-15 margin-right10">{{jiuzhenInfo.gender}}</view>
						<view class="fontSize-15 margin-right10">{{jiuzhenInfo.age}}岁</view>
						<view class="btn2 flex-center" v-if="jiuzhenInfo.is_default == 1">默认</view>
					</view>
					<view class="fontSize-15">证件号: {{jiuzhenInfo.card}}</view>
				</view>
				<view class="flex-center jiuzhen-view" v-else>
					<u-icon name="plus" color="#0165FD" size="20"></u-icon>
					<view class="fontSize-15 color-0165FD margin-left20">就诊人列表</view>
				</view>
			</view>
			
			<!-- 个人中心 -->
			<view class="padding-30 border-radius30 bg-fff">
				<view class="flex-between margin-bottom30 userItem" v-for="(item,index) in list" :key="index"
				@click="goToPath(item)">
					<view class="flex-alignItems-center"> 
						<image class="img-44" :src="item.image" mode=""></image>
						<view class="fontSize-15 color-000 margin-left20">{{item.name}}</view>
					</view>
					<u-icon name="arrow-right" color="#666666" size="20"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{name:'健康档案',image:'../../static/image/10.png',path:'/pages/mine/mine-list/health-records/health-records'},
					{name:'设置',image:'../../static/image/11.png',path:"/pages/mine/mine-list/setting-view"}
				],
				userinfo:{},
				jiuzhenInfo:{}, //就诊人详情
			}
		},
		onShow() {
			if(uni.getStorageSync('token')){
				this.getUserInfo()
			}
			// 判断缓存是否有就诊人
			if(uni.getStorageSync('patlient-item')){
				this.jiuzhenInfo = uni.getStorageSync('patlient-item')
				this.jiuzhenInfo.card = this.jiuzhenInfo.card.replace(/(\w{2})\w*(\w{2})/, '$1**************$2');
			}
		},
		methods: {
			async getUserInfo(){
				let res = await this.$http.post(this.$api.user_info,{},{token:true})
				console.log(res)
				if(res.code == 1){
					this.userinfo = res.data
				}
			},
			goToPath(item){
				uni.navigateTo({
					url:item.path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn2{
		padding: 5rpx 10rpx;
		border: 1px solid #FF7070;
		font-weight: 400;
		font-size: 12px;
		color: #FF7070;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}
	.btn1{
		padding: 5rpx 10rpx;
		// min-width: 10rpx;
		background: #F7BB57;
		font-weight: 400;
		font-size: 12px;
		color: #FFFFFF;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}
	.userItem:last-child{
		border-bottom: none !important;
		padding-bottom: 0 !important;
	}
	.userItem{
		border-bottom: 1px solid #DBDBDB;
		padding-bottom: 30rpx;
	}
	.jiuzhen-view1{
		padding: 30rpx 20rpx;
		background: #E9F2FF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		color: #000000;
		border: 1rpx solid #0165FD;
	}
	.jiuzhen-view {
		height: 76rpx;
		padding: 30rpx 20rpx;
		background: #E9F2FF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 1rpx solid #0165FD;
	}

	.header-view {
		width: 100%;
		height: 450rpx;
		overflow: hidden;
	}
</style>